<template>
  <div>
    <mt-navbar v-model="selected" :class="{'mini-screen': showContainer}">
      <mt-tab-item v-for="(nav, index) in barList" :id="nav.num" :key="index" class="navbar" @click.native="routerTo(nav.pathName)">
        <div slot="icon" class="icons" :class="nav.iconClass" v-if="nav.iconClass"></div>
        {{nav.title}}
        <img :src="`/src/assets/card/${nav.num === selected ? 'list-white' : 'list-blue'}.png`" @click.stop="allLongCard" v-if="showContainer && selected === '1' && !listOrBlock">
        <img :src="`/src/assets/card/${nav.num === selected ? 'block-white' : 'block-blue'}.png`" @click.stop="allShortCard" v-if="showContainer && selected === '1' && listOrBlock">
      </mt-tab-item>
    </mt-navbar>
    <div class="screen" v-if="showContainer" @click="showPopup">
      <img src="/src/assets/icons/menu-screen.png">
      <span>筛选</span>
    </div>
    <!-- 筛选popup -->
    <mt-popup v-model="popupVisible" position="right">
      <bank-filter
        ref="filter"
        @close="closePopup"
        @chooseOwner="chooseOwner"
        @chooseBank="chooseBank"
      ></bank-filter>
    </mt-popup>
    <!-- tabcontainer -->
    <mt-tab-container v-model="selected" v-if="showContainer">
      <mt-tab-container-item id='1'>
        <my-bill-card ref="bill"></my-bill-card>
      </mt-tab-container-item>
      <mt-tab-container-item id='2'>
        <my-fee-card ref="fee"></my-fee-card>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
import MyBillCard from '@/container/card/MyBillCard'
import MyFeeCard from '@/container/card/MyFeeCard'
import BankFilter from '@/container/card/BankFilter'

export default {
  name: 'NavBar',
  props: ['barList', 'showContainer'],
  components: {
    MyBillCard,
    MyFeeCard,
    BankFilter
  },
  data () {
    return {
      selected: this.$route.query.selected || '1',
      popupVisible: false,
      listOrBlock: true
    }
  },
  methods: {
    routerTo (pathName) {
      if (pathName === undefined) {
        let query = {}
        // 浅拷贝
        for (let i in this.$route.query) {
          query[i] = this.$route.query[i]
        }
        Object.assign(query, {selected: this.selected})
        this.$router.replace({query})
        switch (Number(this.selected)) {
          case 1:
            this.$refs.bill.getBillList()
            this.$refs.bill.getHideList()
            break
          case 2:
            this.$refs.fee.getFeeList()
            break
        }
        return false
      }
      this.$router.push({'name': pathName})
    },
    showPopup () {
      this.popupVisible = true
      this.$refs.filter.getPopupData()
    },
    closePopup () {
      this.popupVisible = false
    },
    chooseOwner (v) {
      this.$refs.bill.owner = v
      this.$refs.fee.owner = v
      this.updateData()
    },
    chooseBank (v) {
      this.$refs.bill.bank_id = v
      this.$refs.fee.bank_id = v
      this.updateData()
    },
    updateData () {
      this.$refs.bill.getBillList()
      this.$refs.bill.getHideList()
      this.$refs.fee.getFeeList()
    },
    allShortCard () {
      this.listOrBlock = false
      this.$refs.bill.allShortCard()
    },
    allLongCard () {
      this.listOrBlock = true
      this.$refs.bill.allLongCard()
    }
  },
  mounted () {
    if (this.$route.query.s !== undefined) {
      this.selected = this.$route.query.s
    }
  }
}
</script>
<style lang="less">
  .navbar {
     .mint-tab-item-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 4px;
      .icons {
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .nav-recommend {
        background-image: url('/src/assets/nav/nav-recommend.png');
      }
      .nav-book {
        background-image: url('/src/assets/nav/nav-book.png');
      }
      .nav-mcc {
        background-image: url('/src/assets/nav/nav-mcc.png');
      }
      .nav-customer-service {
        background-image: url('/src/assets/nav/nav-customer-service.png');
      }
    }
  }
</style>